<%-- 
    Document   : login
    Created on : 2018-10-30, 14:04:58
    Author     : yaohk
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form"%>
<%
    pageContext.setAttribute("contextPath", request.getContextPath());
%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>欢迎使用</title>
        <link rel="shortcut icon" href="${contextPath}/resources/images/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="${contextPath}/resources/images/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="${contextPath}/resources/css/login.css" type="text/css"/>
        <%@include file="/WEB-INF/jspf/layui/top_layui.jspf" %>
        <style type="text/css">

            .layui-input-block{
                margin: 20px 20px 0px; 
                width: 240px;
            }

        </style>
    </head>
    <body>
        <div class="login-wp">
            <div class="login-ct">
                <div class="login-box" style="height: 300px; width: 280px">
                    <div class="login-title" style="height: 50px;">
                        <p style="line-height: 50px;font-size: 24px;">登录</p>
                    </div>
                    <s:form class="layui-form" action="${contextPath}/login" method="post" id="loginFm" commandName="sysUser">
                        <div class="layui-form-item" >
                            <div class="layui-input-block">
                                <input type="text" name="account" id="account" placeholder="请输入用户名" lay-verify="required" autocomplete="off" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="password" name="password" id="password" placeholder="请输入密码" lay-verify="required" autocomplete="off"  class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline"style="width: 110px; margin-left: 20px" >
                                <input type="text" name="codeInp" id="codeInp" placeholder="验证码" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                            <div class="code-box" style="width: 80px; height: 36px;">
                                <img title="点击换一张"  src="${contextPath}/captcha-image" id="kaptchaImage" style="width: 80px; height: 36px;" /> 
                                <img id="loading" src="${contextPath}/resources/images/loading.gif" style="display: none;margin-left: 20px;vertical-align: middle;" />
                            </div>
                            <div class="change-text" style="height: 36px; padding-top: 3px;">
                                <a href="#" id="change_text_id" title="点击换一张"></a>
                            </div>
                        </div>
                        <div class="error-tip" style="display: none;">
                            <s:errors path="*" id="errorSpan" cssStyle="color: red;font-size:15px;"/>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn  layui-btn-radius layui-btn-normal" lay-submit lay-filter="login" style="width: 230px;">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
                            </div>
                        </div>
                    </s:form>
                    <div class="clear"></div> 
                </div>
                <div class="logo-tip">
                    ©2008-2013<a href="#">福州云动科技有限公司</a>版权所有。技术支持：18950295137
                </div
            </div>
        </div>


        <script type="text/javascript">
            $(document).ready(function () {
                var loginWpTop = ($(window).height() - $('.login-wp').height()) / 2 - 60;
                $('.login-wp').css('top', loginWpTop);
                $('#kaptchaImage').click(function () {
                    changeCodeImg();
                });
                $('#change_text_id').click(function () {
                    changeCodeImg();
                });
                function changeCodeImg() {
                    $('#kaptchaImage').hide().attr('src', '${contextPath}/captcha-image?' + Math.floor(Math.random() * 100)).fadeIn();
                }
                ;
            });
            layui.use(['form', 'layer'], function () {
                var form = layui.form;
//                form.on('submit(login)', function (data) {
//                    if (data.field.account === '') {
//                        layer.tips('请输入用户名', '#account');
//                    } else if (data.field.password === '') {
//                        layer.tips('请输入密码','#password');
//                    } else if (data.field.codeInp === '') {
//                        layer.tips('请输入验证码', '#codeInp');
//                    } else {
//                        return true;
//                    }
//                    return false;

//                });
                var error = $('#errorSpan').html();
                if (error !== undefined && error !== '') {
                    layer.msg(error, {time: 2000});
                }
            });
        </script> 



    </body>
</html>
